<template>
  <a-card :bordered="false">
    <j-tree-table
      :url="url"
      topValue="0"
      queryKey="id"
      :columns="columns"
      :tableProps="tableProps">

      <template v-slot:action="props">
        <!-- 可使用的参数： -->
        <!-- props.text -->
        <!-- props.record -->
        <!-- props.index -->
        <a @click="()=>handleEdit(props.record)">编辑</a>
      </template>

    </j-tree-table>
  </a-card>
</template>

<script>
import JTreeTable from '@/components/jeecg/JTreeTable'

export default {
  name: 'JeecgTreeTable',
  components: { JTreeTable },
  data() {
    return {
      url: '/mock/api/asynTreeList',
      columns: [
        {
          title: '菜单名称',
          dataIndex: 'name'
        },
        {
          title: '组件',
          dataIndex: 'component'
        },
        {
          title: '排序',
          dataIndex: 'orderNum'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectedRowKeys: []
    }
  },
  computed: {
    tableProps() {
      let _this = this
      return {
        // 列表项是否可选择
        // https://vue.ant.design/components/table-cn/#rowSelection
        rowSelection: {
          selectedRowKeys: _this.selectedRowKeys,
          onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
        }
      }
    }
  },
  methods: {
    handleEdit(record) {
      this.$info({
        width: 600,
        title: '编辑',
        content: '编辑ID：' + record.id + '；名称：' + record.name,
        okText: '确定',
        maskClosable: true
      })
    }
  }
}
</script>

<style scoped></style>
